<template>
  <div>Hello 015</div>

  <ul>
    <li>UserName:{{ Person.name }}</li>
    <li>UserAge:{{ Person.age }}</li>
  </ul>

  <button @click="changeName">Change Name</button>
  <button @click="changeAeg">Change Age</button>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
//toRefs 的作用就是将 reactive所定义的对象 转换成ref
//解构解析的时候， 要用这个。否则就是非响应式的数据了
//---------------
let Person = reactive({
  name: "Jock_Fang",
  age: 18,
});
//----------- 注意下
let { name, age } = toRefs(Person);

//--------------
function changeName() {
  console.log(name);

  name.value += "~";
}

function changeAeg() {
  console.log(age);

  age.value += 1;
}

// function changeName() {
//   Person.name += "~";
// }

// function changeAeg() {
//   Person.age += 1;
// }
</script>

<style scoped>
button {
  margin: 0 10px;
}
</style>